 /*
 1.定位  子绝父相 top left ----bottom right
 2、获取元素--dow 绑定事件onclick 鼠标点击 鼠标移入onmouseleave
 3、for循环 --for(var i = 0;i < arr.length; i++){}
 4、if (条件 true/false){}
 5、排他思想 --把所有人都干掉然后偷偷 -----说好的一起白头，你却偷偷局油
 6、innergtml--在html写东西  style-改变样式  className --类名
 7、为了配合数组使用 -- 下标从0开始 自己定义下标 实现自增或者自减
 */






window.onload = function () {
    var imgall = document.querySelector(".imgall")
    var left1 = document.querySelector(".left1")
    var right1 = document.querySelectorAll(".right1")
    var alla = document.querySelectorAll("a")
    index = 0
    cicle = 0
    right1.onclick = function () {
        index++
        if (index == 4) {
            index = 0
        }
        imgall.style.left = -721 * index + "px"
        cicle++
        if (cicle == 4) {
            cicle = 0
        }
        for (var i = 0; i < alla.length; i++) {
            alla[i].className = ""
        }
        alla[cicle].className = "info"
    }
    left1.onclick = function () {
        index--
        if (index < 0) {
            index = 3
        }
        imgall.style.left = -721 * index + "px"
        cicle--
        // 无缝斜接
        if (cicle < 0) {
            cicle = 3
        }
        // 排他思想--干掉所有人然后自己独享-  className 设置类名
        for (var i = 0; i < alla.length; i++) {
            // 把原来的类名去掉
            alla[i].className = ""
        }
        // 设置类名---自己的独享
        alla[cicle].className = "info"
    }
    // 鼠标移入
    var box = document.querySelector(".box")
    box.onmouseover = function () {
        // alert(1)
        left1.style.display = "block"
        right1.style.display = "block"
    }
    // 移出
    box.onmouseleave = function () {
        left1.style.display = "none"
        right1.style.display = "none"
    }
}
